<template>
  <div id="app">
    <!--路由占位符-->
    <transition :name="direction">
      <router-view class="appView"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    direction: "slide-right",
  }),
  watch: {
    $route(to, from) {
      const toDepth = to.path.split("/").length;
      const fromDepth = from.path.split("/").length;
      if (to.path == "/") {
        this.direction = "slide-right";
      } else if (from.path == "/") {
        this.direction = "slide-left";
      } else {
        this.direction = toDepth < fromDepth ? "slide-right" : "slide-left";
      }
    },
  },
};
</script>

<style >

/* ::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
} */
.appView {
  position: absolute;
  width: 100%;
  transition: transform 0.3s ease-out;
}
.slide-left-enter {
  transform: translate(100%, 0);
}
.slide-left-leave-active {
  transform: translate(-50%, 0);
}
.slide-right-enter {
  transform: translate(-50%, 0);
}
.slide-right-leave-active {
  transform: translate(100%, 0);
}

</style>